<template>
  <div class="login">
    <input type="text" name="" id="" v-model="username">
    <button @click="handleEnterClick">进入聊天室</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    
    const username = ref('');
    const router = useRouter();

    // 组件挂载的时候判断 用户名是否存在， 不存在则跳转登录页
    onMounted(() => {
      username.value = localStorage.getItem('username');

      if(username.value) {
        router.push('/login');
        return;
      }
    })
    const handleEnterClick = () => {
      const _username = username.value;
      console.log(_username);

      if(_username.length < 6) {
        alert('用户名不小于6位')
        return;
      }

      localStorage.setItem('username', _username);

      router.push('/');
    }

    return {
      username,
      handleEnterClick
    }
  },
})
</script>
